<template>
    <div class="bar">
        <div class="head"><img src='public\images\logo.png'><p class="title">宿蜂</p></div>
        <ul class="guidefather">
            <li v-for="guide in guides" :key="guide">{{guide}}</li>
        </ul>
    </div>
</template>

<script>
export default {
  data () {
    return {
      guides: [
        '主页',
        '使用场景',
        '关于我们',
        '发展历程',
        '加入我们'
      ]
    }
  }
}
</script>

<style scoped>
*{
    margin: 0;
    padding: 0;
    color: white;
}
.bar{
    background-color:#ffd113;
    width: 100%;
    height: 70px;
    position: fixed;
    display: flex;
    top: 0;
    align-items: center;
}
.guide{
    float: left;
    flex: 1;
    list-style: none;
    color: white;
    font-size: 20px;
}
.bar .head{
    flex: 4;
        justify-content: center;
}
.head img{
    flex: 1;
    width: 50px;
    height: 50px;
    /* float: left; */
    transform: translateY(25%);
}
.head .title{
    flex: 1;
    font-size: 50px;
    font-weight: bold;
}
.guidefather{
    flex: 6;
    float: right;
}
.guidefather li{
    float: left;
    list-style: none;
    color: white;
    font-size: 20px;
    margin: 10px;
}
</style>
